<template>
	<view class="top-up">
		<u-loading-page :loading="is_paying" :loading-text="loading_word"></u-loading-page>
		<view class="top-up-tit">
			<image src="/static/images/tips.png" mode=""></image>
			<text>充值金额终身有效，支付成功后概不支持退款，如需转移账号可联系客服操作</text>
		</view>
		<view class="top-up-con-box">
			<view class="top-up-con" v-for="(item,index) in moneyList" :key="index" :class="{active:index===selected}"
				@click="selectItem(index,item.id)">
				<view class="top-up-con-money" :style="{ color: index === selected ? '#40C6A1' : '#303133' }">
					{{item.num}}元
				</view>
				<view class="top-up-con-money-give" :style="{ color: index === selected ? '#40C6A1' : '#606266' }">
					(赠送{{item.extra}}元)
				</view>
			</view>
		</view>
		<view class="top-up-btn">
			<button v-if="is_transzaction_end" @click="toMyPage">跳转至我的</button>
			<button @click="sumbit" v-else :disabled="is_paying">立即充值</button>
		</view>
	</view>
</template>

<script>
	import {
		create_wechat_pay_api,
		check_wechat_pay_success_api,
		update_blance_api,
		get_balance_options_api,
	} from '@/common/api.js'
	export default {
		onLoad() {},
		data() {
			return {
				temp: 0,
				selected: 0,
				moneyList: [],

				loading_word: '',
				is_paying: false,
				is_transzaction_end: false,
			};
		},
		onLoad() {
			this.getOpttions()
		},
		methods: {
			getOpttions() {
				get_balance_options_api().then(res => {
					this.moneyList = res.data
				})
			},

			sumbit() {
				uni.showModal({
					title: '提示',
					content: `你确认要充值: ${this.moneyList[this.selected].num}吗？`,
					success: (res) => {
						let data
						if (res.confirm) {
							this.is_paying = true
							this.loading_word = '请求支付...'

							create_wechat_pay_api({
								type: 2, //余额充值
								item_key: this.moneyList[this.selected].id,
							}).then(res => {
								console.log(res);
								data = res.data
								if (1 != res.code) {
									this.$u.toast(res.msg)
									return
								}

								return new Promise((resolve, reject) => {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: data.timeStamp,
										nonceStr: data.nonceStr,
										package: data.package,
										signType: data.signType,
										paySign: data.paySign,
										success: function(res) {
											resolve(res)
										},
										fail: function(err) {
											reject(err);
										}
									});
								})
							}).then(async res => {
								//检查是是否成功
								this.loading_word = `检查支付...`
								return check_wechat_pay_success_api({
									transaction_id: data.transaction_id
								})
							}).then(res => {
								if (1 == res.code) {
									this.loading_word = '更新充值状态...'
									return update_blance_api({
										recharge_id: this.moneyList[this.selected].id,
										transaction_id: data.transaction_id
									})
								} else if (2 == res.code) { // 订单未支付
									return Promise.reject(res.msg)
								} else { // 订单支付失败
									return Promise.reject(res.msg)
								}
							}).then(res => {
								if (res.code == 1) {
									this.is_transzaction_end = true
									this.$u.toast('充值成功', 2000)
									this.updateUserInfo() // 同步服务端，更新本地用户数据
									setTimeout(() => {
										this.$u.route({
											url: '/pages/my/my',
											type: 'tab',
										})
									}, 2000)
								} else {
									this.$u.toast(res.msg)
								}
							}).catch(msg => {
								this.$u.toast(msg)
							}).finally(() => {
								this.is_paying = false
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			selectItem(index) {
				// this.createOrderInfo.item_key = id;
				if (index === this.selected) {
					// 如果当前项已经被选中，则取消选中
					// this.selected = -1;
				} else {
					// 否则选中当前项
					this.selected = index;
				}
			},
			
			toMyPage() {
				this.$u.route({
					url: '/pages/my/my',
					type: 'tab',
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-up {
		margin-top: 40rpx;

		.top-up-tit {
			box-sizing: border-box;
			padding: 0 24rpx;
			display: flex;
			align-items: flex-start;

			image {
				width: 40rpx;
				height: 36rpx;
				margin-right: 16rpx;
				margin-top: 8rpx;
			}

			text {
				font-size: 28rpx;
				font-weight: 500;
				color: #C0C4CC;
				line-height: 42rpx;
			}
		}
	}

	.top-up-con-box {
		display: flex;
		flex-wrap: wrap;
		margin-left: 42rpx;

		.top-up-con {
			width: 300rpx;
			height: 140rpx;
			background: #F3F4F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
			margin-right: 50rpx;
			margin-top: 58rpx;

			.top-up-con-money {
				margin-top: 16rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #303133;
			}

			.top-up-con-money-give {
				font-size: 28rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-weight: 400;
				color: #606266;
			}

		}

	}

	.active {
		width: 300rpx;
		height: 140rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 6rpx solid #40C6A1;
		box-sizing: border-box;

	}

	.top-up-btn {
		position: fixed;
		bottom: 65rpx;
		margin-left: 48rpx;

		button {
			width: 654rpx;
			height: 96rpx;
			background: #40C6A1;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 36rpx;
			text-align: center;
			line-height: 96rpx;
			font-weight: 500;
			color: #F3F4F6;
		}
	}
</style>